<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>/home/zjh/git/Koala-UI/KoalaUI/WebContent/lib/Koala_Wizard.js</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.9.1/build/cssgrids/cssgrids-min.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
    <link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
    <script src="http://yui.yahooapis.com/combo?3.9.1/build/yui/yui-min.js"></script>
</head>
<body class="yui3-skin-sam">

<div id="doc">
    <div id="hd" class="yui3-g header">
        <div class="yui3-u-3-4">
            
                <h1><img src="../assets/css/logo.png" title=""></h1>
            
        </div>
        <div class="yui3-u-1-4 version">
            <em>API Docs for: </em>
        </div>
    </div>
    <div id="bd" class="yui3-g">

        <div class="yui3-u-1-4">
            <div id="docs-sidebar" class="sidebar apidocs">
                <div id="api-list">
    <h2 class="off-left">APIs</h2>
    <div id="api-tabview" class="tabview">
        <ul class="tabs">
            <li><a href="#api-classes">Classes</a></li>
            <li><a href="#api-modules">Modules</a></li>
        </ul>

        <div id="api-tabview-filter">
            <input type="search" id="api-filter" placeholder="Type to filter APIs">
        </div>

        <div id="api-tabview-panel">
            <ul id="api-classes" class="apis classes">
            
                <li><a href="../classes/Accordion.html">Accordion</a></li>
            
                <li><a href="../classes/AutoComplete.html">AutoComplete</a></li>
            
                <li><a href="../classes/Button.html">Button</a></li>
            
                <li><a href="../classes/Carousel.html">Carousel</a></li>
            
                <li><a href="../classes/ColorPicker.html">ColorPicker</a></li>
            
                <li><a href="../classes/Combobox.html">Combobox</a></li>
            
                <li><a href="../classes/DateTimePicker.html">DateTimePicker</a></li>
            
                <li><a href="../classes/Grid.html">Grid</a></li>
            
                <li><a href="../classes/ListView.html">ListView</a></li>
            
                <li><a href="../classes/Popover.html">Popover</a></li>
            
                <li><a href="../classes/ProgressBar.html">ProgressBar</a></li>
            
                <li><a href="../classes/RichTextEditor.html">RichTextEditor</a></li>
            
                <li><a href="../classes/ScrollSpy.html">ScrollSpy</a></li>
            
                <li><a href="../classes/Select.html">Select</a></li>
            
                <li><a href="../classes/SideBar.html">SideBar</a></li>
            
                <li><a href="../classes/Slider.html">Slider</a></li>
            
                <li><a href="../classes/Spinner.html">Spinner</a></li>
            
                <li><a href="../classes/Tab.html">Tab</a></li>
            
                <li><a href="../classes/ToolBar.html">ToolBar</a></li>
            
                <li><a href="../classes/Tooltip.html">Tooltip</a></li>
            
                <li><a href="../classes/Tree.html">Tree</a></li>
            
                <li><a href="../classes/Wizard.html">Wizard</a></li>
            
            </ul>

            <ul id="api-modules" class="apis modules">
            
            </ul>
        </div>
    </div>
</div>

            </div>
        </div>
        <div class="yui3-u-3-4">
                <div id="api-options">
        Show:
        <label for="api-show-inherited">
            <input type="checkbox" id="api-show-inherited" checked>
            Inherited
        </label>

        <label for="api-show-protected">
            <input type="checkbox" id="api-show-protected">
            Protected
        </label>

        <label for="api-show-private">
            <input type="checkbox" id="api-show-private">
            Private
        </label>
        <label for="api-show-deprecated">
            <input type="checkbox" id="api-show-deprecated">
            Deprecated
        </label>

    </div>


            <div class="apidocs">
                <div id="docs-main">
                    <div class="content">
                        <h1 class="file-heading">File: /home/zjh/git/Koala-UI/KoalaUI/WebContent/lib/Koala_Wizard.js</h1>

<div class="file">
    <pre class="code prettyprint linenums">
/**
 * @author zjh
 */
+function($) {

	&quot;use strict&quot;;

	// Wizard PUBLIC CLASS DEFINITION
	// ==============================

	/**
	 * 向导组件
	 * @class Wizard
	 * @constructor
	 * @use Koala_Tab
	 * @example
	 * 	js代码
	 * 	$(function(){
			$(&quot;.wizard&quot;).wizard();
		});
	 * @example
	 * 	html代码
	 * 	&lt;div id=&quot;main&quot;&gt;
			&lt;form action=&quot;#&quot; method=&quot;post&quot;&gt;
				&lt;div class=&quot;wizard&quot;&gt;
					&lt;ul class=&quot;nav nav-tabs&quot;&gt;
					  &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#&quot;&gt;第一步&lt;/a&gt;&lt;/li&gt;
					  &lt;li&gt;&lt;a href=&quot;#&quot; &gt;第二步&lt;/a&gt;&lt;/li&gt;
					  &lt;li&gt;&lt;a href=&quot;#&quot; &gt;第三步&lt;/a&gt;&lt;/li&gt;
					&lt;/ul&gt;
			
					&lt;div class=&quot;items&quot;&gt;
						&lt;div class=&quot;page&quot;&gt;
			               &lt;div&gt;第一步内容&lt;/div&gt;
			               &lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
			               &lt;div class=&quot;btn_nav&quot;&gt;
			                 	&lt;button data-toggle=&quot;next&quot; class=&quot;btn right btn-default&quot;&gt;下一步&amp;raquo;&lt;/button&gt;
			                 	&lt;button data-toggle=&quot;last&quot; class=&quot;btn right btn-default&quot;&gt;最后一步&amp;raquo;&lt;/button&gt;
			                 	&lt;button data-toggle=&quot;goPage&quot; class=&quot;btn right btn-success&quot; id=&quot;gofirst&quot; pageNo=&quot;10&quot; pageId=&quot;second-step&quot;&gt;第十页&lt;/button&gt;
			               &lt;/div&gt;
			            &lt;/div&gt;
						&lt;div class=&quot;page&quot;&gt;
			               &lt;div&gt;这个是第二页&lt;/div&gt;
			               &lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
			               &lt;div class=&quot;btn_nav&quot;&gt;
			                   &lt;button data-toggle=&quot;prev&quot; class=&quot;right btn btn-default&quot; &gt;&amp;laquo;上一步&lt;/button&gt;
			               	   &lt;button data-toggle=&quot;next&quot; class=&quot;right btn btn-default&quot; &gt;下一步&amp;raquo;&lt;/button&gt;
			               	   &lt;button data-toggle=&quot;goPage&quot; class=&quot;right btn btn-success&quot; id=&quot;gofirst&quot; pageNo=&quot;10&quot; pageId=&quot;second-step&quot;&gt;第十页&lt;/button&gt;
			               &lt;/div&gt;
			            &lt;/div&gt;
						&lt;div class=&quot;page&quot;&gt;
			               &lt;div&gt;最后一页&lt;/div&gt;
			               &lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
			               &lt;div class=&quot;btn_nav&quot;&gt;
			               	  &lt;button data-toggle=&quot;prev&quot; class=&quot;right btn btn-default&quot; &gt;&amp;laquo;上一步&lt;/button&gt;
			               	  &lt;button data-toggle=&quot;next&quot; class=&quot;right btn btn-default&quot; &gt;&amp;laquo;下一步&lt;/button&gt;
			               	  &lt;button data-toggle=&quot;first&quot; class=&quot;right btn btn-default&quot; &gt;&amp;laquo;首页&lt;/button&gt;
			               	  
			               &lt;/div&gt;
			            &lt;/div&gt;
					&lt;/div&gt;
				&lt;/div&gt;
			&lt;/form&gt;
		&lt;/div&gt;
	 */
	var Wizard = function(element, options) {
		this.init(element, options);
	};

	Wizard.DEFAULTS = {
		/**
		 * 向导页签TAB的选择器
		 * @property ul
		 * @type String
		 * @default &#x27;.nav-tabs&#x27;
		 */
		ul : &#x27;.nav-tabs&#x27;,
		/**
		 * 向导内容区域所在的选择器
		 * @property items
		 * @type String
		 * @default &#x27;.items&#x27;
		 */
		items : &#x27;.items&#x27;,
		/**
		 * items下每一个内容div的选择器
		 * @property itempage
		 * @type String
		 * @default &#x27;.page&#x27;
		 */
		itempage : &#x27;.page&#x27;,
		/**
		 * 动画切换方式
		 * @property swing
		 * @type String
		 * @default &#x27;swing&#x27;
		 */
		swing : &#x27;swing&#x27;,
		/**
		 * 下一步的选择器
		 * @property next
		 * @type String
		 * @default &#x27;[data-toggle=&quot;next&quot;]&#x27;
		 */
		next : &#x27;[data-toggle=&quot;next&quot;]&#x27;,
		/**
		 * 上一步的选择器
		 * @property prev
		 * @type String
		 * @default &#x27;[data-toggle=&quot;prev&quot;]&#x27;
		 */
		prev : &#x27;[data-toggle=&quot;prev&quot;]&#x27;,
		/**
		 * 跳转页面的选择器
		 * @property goPage
		 * @type String
		 * @default &#x27;[data-toggle=&quot;goPage&quot;]&#x27;
		 */
		goPage : &#x27;[data-toggle=&quot;goPage&quot;]&#x27;,
		/**
		 * 直接跳到最后
		 * @property first
		 * @type String
		 * @default &#x27;[data-toggle=&quot;first&quot;]&#x27;
		 */
		first : &#x27;[data-toggle=&quot;first&quot;]&#x27;,
		/**
		 * 直接跳到最后
		 * @property last
		 * @type String
		 * @default &#x27;[data-toggle=&quot;last&quot;]&#x27;
		 */
		last : &#x27;[data-toggle=&quot;last&quot;]&#x27;,
		/**
		 * 动画显示的速度
		 * @property speed
		 * @type Integer
		 * @default 400（毫秒）
		 */
		speed : 400
	};

	Wizard.prototype = {
		constructor:Wizard,
		init : function(element, options) {
			this.$element = $(element);
			this.options = $.extend({}, Wizard.DEFAULTS, options);
			this.ul = this.$element.find(this.options.ul);
			this.items = this.$element.find(this.options.items);
			this.items.find(this.options.next).on(&#x27;click.bs.wizard&#x27;,$.proxy(function(e) {
				e.preventDefault();
				this.next(e);
			}, this));
			this.items.find(this.options.prev).on(&#x27;click.bs.wizard&#x27;,$.proxy(function(e) {
				e.preventDefault();
				this.prev(e);
			}, this));
			this.items.find(this.options.goPage).on(&#x27;click.bs.wizard&#x27;,$.proxy(function(e) {
				e.preventDefault();
				this.goPage(e);
			}, this));
			this.items.find(this.options.first).on(&#x27;click.bs.wizard&#x27;,$.proxy(function(e) {
				e &amp;&amp; e.preventDefault();
				this.first(e);
			}, this));
			this.items.find(this.options.last).on(&#x27;click.bs.wizard&#x27;,$.proxy(function(e) {
				e &amp;&amp; e.preventDefault();
				this.last(e);
			}, this));
		},
		
		/**
		 * 下一步
		 * @method next
		 * @param event
		 */
		next : function(e) {
			var that = this;
			var target = $(e.currentTarget);
			var page = target.parent().parent();
			var n = {
				left : -(page.position().left + page.outerWidth())
			};
			that.items.animate(n, that.options.speed, that.options.swing,function() {
				that.ul.find(&#x27;li&#x27;).eq(page.index() + 1).find(&#x27;a&#x27;).tab(&#x27;show&#x27;);
			});
		},
		
		/**
		 * 上一步
		 * @method prev
		 * @param event
		 */
		prev : function(e) {
			var that = this;
			var target = $(e.currentTarget);
			var page = target.parent().parent();
			var n = {
				left : page.outerWidth() - page.position().left
			};
			that.items.animate(n, that.options.speed, that.options.swing,function() {
				that.ul.find(&#x27;li&#x27;).eq(page.index() - 1).find(&#x27;a&#x27;).tab(&#x27;show&#x27;);
			});
		},
		
		/**
		 * 跳到第几步
		 * @method goPage
		 * @param event
		 * @param {Integer} value
		 */
		goPage : function(e,value) {
			var that = this;
			var total = $(that.ul).children(&quot;li&quot;).length;
			var $target = $(e.currentTarget);
			var currentPageNo = that._getPageIndex($target);
			var pageNo = $target.attr(&quot;pageNo&quot;)||value;
			var pageId = $target.attr(&quot;pageId&quot;);
			// 获取相对位置
			var pos = 0;

			var page = $target.parent().parent();
			if (pageNo) {
				if(pageNo &gt; total){
					pageNo = total;
				}
				pos = pageNo -1;
			} else if (pageId) {
				pos = that.ul.find(&#x27;li&#x27;).index($(&#x27;li[id=&#x27; + pageId + &#x27;]&#x27;));
			}
			//这条计算逻辑真TMD复杂，最终搞定
			var n = {left : (page.outerWidth()) * (currentPageNo-pos)-page.position().left};
			that.items.animate(n, that.options.speed, that.options.swing,function() {
				if (pageNo) {
					that.ul.find(&#x27;li&#x27;).eq(pageNo - 1).find(&#x27;a&#x27;).tab(&#x27;show&#x27;);
				} else if (pageId) {
					that.ul.find(&#x27;li[id=&#x27; + pageId + &#x27;]&#x27;).find(&#x27;a&#x27;).tab(&#x27;show&#x27;);
				}
			});
		},
		
		/**
		 * 第一步
		 * @method first
		 * @param event
		 */
		first:function(e){
			this.goPage(e,1);
		},
		
		/**
		 * 最后一步
		 * @method last
		 * @param event
		 */
		last:function(e){
			this.goPage(e, this._getPageCount());
		},
		
		_getPageIndex:function($target){
			var $page = $target.parents(this.options.itempage);
			var index = $(this.options.itempage).index($page);
			return index;
		},
		
		_getPageCount:function(){
			var $item = $(this.options.items);
			var count = $item.children(this.options.itempage).length;
			return count;
		}
	};

	// Wizard PLUGIN DEFINITION
	// ========================

	var old = $.fn.wizard;

	$.fn.wizard = function(option) {
		return this.each(function() {
			var $this = $(this);
			var data = $this.data(&#x27;bs.wizard&#x27;);
			var options = typeof option == &#x27;object&#x27; &amp;&amp; option;

			if (!data)
				$this.data(&#x27;bs.wizard&#x27;, (data = new Wizard(this, options)));
		});
	};

	$.fn.wizard.Constructor = Wizard;

	// BUTTON NO CONFLICT
	// ==================

	$.fn.wizard.noConflict = function() {
		$.fn.wizard = old;
		return this;
	};

}(window.jQuery);

    </pre>
</div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script src="../assets/js/yui-prettify.js"></script>
<script src="../assets/../api.js"></script>
<script src="../assets/js/api-filter.js"></script>
<script src="../assets/js/api-list.js"></script>
<script src="../assets/js/api-search.js"></script>
<script src="../assets/js/apidocs.js"></script>
</body>
</html>
